import 'package:flutter/material.dart';

class WidgetsBody extends StatefulWidget {
  @override
  _WidgetsBodyState createState() => _WidgetsBodyState();
}

class _WidgetsBodyState extends State<WidgetsBody> {
  List<bool> isSelected = [false, false, false];

  @override
  Widget build(BuildContext context) {
    var listThemeText = _themeTextList(context);
    return Padding(
      padding: EdgeInsets.all(15.0),
      child: ListView(
        children: <Widget>[
          Container(
            height: 40.0,
            alignment: Alignment.center,
            child: Text(
              "文本样式",
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w800,
              ),
            ),
          ),
          Divider(height: 30.0, thickness: 3.0),
          ...listThemeText.keys.map((key) {
            return _buildItemStyle(key, listThemeText[key]);
          }).toList(),
          Divider(height: 30.0, thickness: 3.0),
          Container(
            height: 40.0,
            alignment: Alignment.center,
            child: Text(
              "常用组件",
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w800,
              ),
            ),
          ),
          AppBar(
            title: Text("导航"),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.settings),
                onPressed: () {},
              )
            ],
          ),
          Divider(height: 30.0, thickness: 3.0),
          ToggleButtons(
            children: <Widget>[
              Icon(Icons.ac_unit),
              Icon(Icons.call),
              Icon(Icons.cake),
            ],
            onPressed: (int index) {
              setState(() {
                isSelected[index] = !isSelected[index];
              });
            },
            isSelected: isSelected,
          ),
          Divider(height: 30.0, thickness: 3.0),
          Checkbox(value: true, onChanged: (val) {}),
          Checkbox(value: true, onChanged: null),
          Checkbox(value: false, onChanged: (val) {}),
          Checkbox(value: false, onChanged: null),
          CheckboxListTile(
              title: Text("CheckBox"), value: true, onChanged: (val) {}),
          CheckboxListTile(
              title: Text("CheckBox"), value: false, onChanged: (val) {}),
          Radio(value: true, groupValue: true, onChanged: (dynamic val) {}),
          Radio(value: true, groupValue: true, onChanged: null),
          Radio(value: false, groupValue: true, onChanged: (dynamic val) {}),
          Radio(value: false, groupValue: true, onChanged: null),
          RadioListTile(
            title: Text("Radio"),
            value: false,
            groupValue: true,
            onChanged: (dynamic val) {},
          ),
          RadioListTile(
            title: Text("Radio"),
            value: true,
            groupValue: true,
            onChanged: (dynamic val) {},
          ),
          SwitchListTile(
              title: Text("lights"), value: true, onChanged: (val) {}),
          SwitchListTile(
              title: Text("lights"), value: false, onChanged: (val) {}),
          SwitchListTile(title: Text("lights"), value: true, onChanged: null),
          Divider(height: 30.0, thickness: 3.0),
          Container(
            height: 40.0,
            alignment: Alignment.center,
            child: Text(
              "常用组件(MaterialButton)",
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w800,
              ),
            ),
          ),
          Wrap(
            spacing: 10.0,
            runSpacing: 10.0,
            children: <Widget>[
              MaterialButton(child: Text("按钮1"), onPressed: () {}),
              MaterialButton(child: Text("按钮2"), onPressed: null),
              MaterialButton(
                shape: StadiumBorder(),
                child: Text("按钮3"),
                onPressed: () {},
              ),
              MaterialButton(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(0.0),
                  ),
                  // side: BorderSide(),
                ),
                child: Text("按钮3"),
                onPressed: () {},
              ),
            ],
          ),
          Divider(height: 30.0, thickness: 3.0),
          Container(
            height: 40.0,
            alignment: Alignment.center,
            child: Text(
              "常用组件(FlatButton)",
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w800,
              ),
            ),
          ),
          Wrap(
            spacing: 10.0,
            runSpacing: 10.0,
            children: <Widget>[
              TextButton(child: Text("按钮1"), onPressed: () {}),
              TextButton(child: Text("按钮2"), onPressed: null),
              TextButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮3"),
                onPressed: () {},
              ),
              TextButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮4"),
                onPressed: null,
              ),
              TextButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮5"),
                style: stadiumBorderStyle,
                onPressed: () {},
              ),
              TextButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮6"),
                style: stadiumBorderStyle,
                onPressed: null,
              ),
              TextButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮7"),
                style: stadiumBorderStyle,
                // 抗锯齿
                clipBehavior: Clip.antiAlias,
                onPressed: () {},
              ),
              TextButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮8"),
                style: stadiumBorderStyle,
                // BeveledRectangleBorder 顶端斜角
                // BoxBorder
                // CircleBorder 圆形
                // InputBorder
                // RoundedRectangleBorder 顶端圆角
                // StadiumBorder 体育场型
                onPressed: () {},
              ),
              TextButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮9"),
                style: roundedRectangleBorderStyle,
                onPressed: () {},
              ),
            ],
          ),
          Divider(height: 30.0, thickness: 3.0),
          Container(
            height: 40.0,
            alignment: Alignment.center,
            child: Text(
              "常用组件(RaisedButton)",
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w800,
              ),
            ),
          ),
          Wrap(
            spacing: 10.0,
            runSpacing: 10.0,
            children: <Widget>[
              ElevatedButton(child: Text("按钮1"), onPressed: () {}),
              ElevatedButton(child: Text("按钮2"), onPressed: null),
              ElevatedButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮3"),
                style: roundedRectangleBorderStyle,
                onPressed: () {},
              ),
              ElevatedButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮4"),
                onPressed: null,
              ),
              ElevatedButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮5"),
                style: roundedRectangleBorderStyle,
                onPressed: () {},
              ),
              ElevatedButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮6"),
                style: roundedRectangleBorderStyle,
                onPressed: null,
              ),
              ElevatedButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮7"),
                style: roundedRectangleBorderStyle,
                // 抗锯齿
                clipBehavior: Clip.antiAlias,
                onPressed: () {},
              ),
              ElevatedButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮8"),
                style: roundedRectangleBorderStyle,
                // BeveledRectangleBorder 顶端斜角
                // BoxBorder
                // CircleBorder 圆形
                // InputBorder
                // RoundedRectangleBorder 顶端圆角
                // StadiumBorder 体育场型
                onPressed: () {},
              ),
              ElevatedButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮9"),
                style: roundedRectangleBorderStyle,
                onPressed: () {},
              ),
            ],
          ),
          Divider(height: 30.0, thickness: 3.0),
          Container(
            height: 40.0,
            alignment: Alignment.center,
            child: Text(
              "常用组件(OutlineButton)",
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w800,
              ),
            ),
          ),
          Wrap(
            spacing: 10.0,
            runSpacing: 10.0,
            children: <Widget>[
              OutlinedButton(child: Text("按钮1"), onPressed: () {}),
              OutlinedButton(
                style: stadiumBorderStyle,
                child: Text("按钮1"),
                onPressed: () {},
              ),
              OutlinedButton(child: Text("按钮2"), onPressed: null),
              OutlinedButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮3"),
                style: roundedRectangleBorderStyle,
                onPressed: () {},
              ),
              OutlinedButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮4"),
                onPressed: null,
              ),
              OutlinedButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮5"),
                style: roundedRectangleBorderStyle,
                onPressed: () {},
              ),
              OutlinedButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮6"),
                style: roundedRectangleBorderStyle,
                onPressed: null,
              ),
              OutlinedButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮7"),
                style: stadiumBorderStyle,
                // 抗锯齿
                clipBehavior: Clip.antiAlias,
                onPressed: () {},
              ),
              OutlinedButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮8"),
                style: stadiumBorderStyle,
                // BeveledRectangleBorder 顶端斜角
                // BoxBorder
                // CircleBorder 圆形
                // InputBorder
                // RoundedRectangleBorder 顶端圆角
                // StadiumBorder 体育场型
                onPressed: () {},
              ),
              OutlinedButton.icon(
                icon: Icon(Icons.add),
                label: Text("按钮9"),
                style: roundedRectangleBorderStyle,
                onPressed: () {},
              ),
            ],
          ),
          Divider(height: 30.0, thickness: 3.0),
          Container(
            height: 40.0,
            alignment: Alignment.center,
            child: Text(
              "常用组件(IconButton)",
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w800,
              ),
            ),
          ),
          Wrap(
            spacing: 10.0,
            runSpacing: 10.0,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.add),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.add),
                onPressed: null,
              ),
              IconButton(
                icon: Icon(Icons.sentiment_satisfied),
                alignment: AlignmentDirectional.center,
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.volume_up),
                // padding: EdgeInsets.all(20.0),
                onPressed: () {},
              ),
              FloatingActionButton(
                child: Icon(Icons.visibility),
                onPressed: () {},
                heroTag: null,
              ),
              FloatingActionButton(
                child: Icon(Icons.visibility),
                elevation: 3.0,
                highlightElevation: 5.0,
                onPressed: () {},
                heroTag: null,
              ),
            ],
          ),
          Divider(height: 30.0, thickness: 3.0),
          Container(
            height: 40.0,
            alignment: Alignment.center,
            child: Text(
              "常用组件(RawMaterialButton)",
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w800,
              ),
            ),
          ),
          Wrap(
            spacing: 10.0,
            runSpacing: 10.0,
            children: <Widget>[
              RawMaterialButton(child: Text("按钮1"), onPressed: () {}),
              RawMaterialButton(child: Text("按钮2"), onPressed: null),
              RawMaterialButton(
                onPressed: () {},
                child: new Icon(
                  Icons.switch_camera,
                ),
                highlightElevation: 3.0,
              ),
              RawMaterialButton(
                onPressed: () {},
                child: new Icon(
                  Icons.switch_camera,
                ),
                shape: new CircleBorder(),
              ),
              RawMaterialButton(
                onPressed: () {},
                child: new Icon(
                  Icons.switch_camera,
                ),
                shape: new CircleBorder(side: BorderSide()),
              ),
              RawMaterialButton(
                onPressed: () {},
                child: new Icon(
                  Icons.switch_camera,
                ),
                shape: new CircleBorder(),
                elevation: 3.0,
                highlightElevation: 0.0,
                // fillColor: Colors.white,
                fillColor: Theme.of(context).canvasColor,
                padding: const EdgeInsets.all(12.0),
                // 抗锯齿
                clipBehavior: Clip.antiAlias,
              ),
              RawMaterialButton(
                onPressed: () {},
                child: new Icon(
                  Icons.switch_camera,
                ),
                shape: StadiumBorder(side: BorderSide()),
              ),
              RawMaterialButton(
                onPressed: () {},
                child: new Icon(
                  Icons.switch_camera,
                ),
                animationDuration: Duration(milliseconds: 200),
                shape: StadiumBorder(),
                // fillColor: Colors.white,
                fillColor: Theme.of(context).canvasColor,
              ),
            ],
          ),
          Divider(height: 30.0, thickness: 3.0),
          Container(
            height: 40.0,
            alignment: Alignment.center,
            child: Text(
              "常用组件(TextField)",
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w800,
              ),
            ),
          ),
          TextField(
            decoration: InputDecoration(
              hintText: "提示文本",
            ),
          ),
          TextField(
            decoration: InputDecoration(
              icon: Icon(Icons.account_box),
              hintText: "提示文本",
            ),
          ),
          TextField(
            decoration: InputDecoration(
              prefixIcon: Icon(Icons.account_box),
              hintText: "提示文本",
            ),
          ),
          TextField(
            decoration: InputDecoration(
              suffixIcon: Icon(Icons.clear),
              hintText: "提示文本",
            ),
          ),
          TextField(
            textAlignVertical: TextAlignVertical.bottom,
            decoration: InputDecoration(
              // isDense: true, //重要 用于编辑框对齐
              suffixIcon: InkWell(
                child: Icon(Icons.clear),
                onTap: () {
                  print("object");
                },
              ),
              hintText: "提示文本",
            ),
          ),
        ],
      ),
    );
  }

  /// 主题属性值
  Widget _buildItemStyle(String name, TextStyle? style) {
    return Container(
      constraints: BoxConstraints(minHeight: 45.0),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Text(name, maxLines: 3),
          ),
          Expanded(
            flex: 1,
            child: Container(
              alignment: Alignment.center,
              child: Text(
                "文本内容",
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: style,
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 系统字体色
  Map<String, TextStyle?> _themeTextList(BuildContext context) {
    ThemeData data = Theme.of(context);
    // typography 为笔墨属性,控制字体默认样式用
    print(data.typography.toString());
    return {
      "TextTheme.displayLarge": data.textTheme.displayLarge,
      "primary.displayLarge": data.primaryTextTheme.displayLarge,
      "TextTheme.displayMedium": data.textTheme.displayMedium,
      "primary.displayMedium": data.primaryTextTheme.displayMedium,
      "TextTheme.displaySmall": data.textTheme.displaySmall,
      "primary.displaySmall": data.primaryTextTheme.displaySmall,
      "TextTheme.headlineLarge": data.textTheme.headlineLarge,
      "primary.headlineLarge": data.primaryTextTheme.headlineLarge,
      "TextTheme.headlineMedium": data.textTheme.headlineMedium,
      "primary.headlineMedium": data.primaryTextTheme.headlineMedium,
      "TextTheme.headlineSmall": data.textTheme.headlineSmall,
      "primary.headlineSmall": data.primaryTextTheme.headlineSmall,
      "TextTheme.titleLarge": data.textTheme.titleLarge,
      "primary.titleLarge": data.primaryTextTheme.titleLarge,
      "TextTheme.titleMedium": data.textTheme.titleMedium,
      "primary.titleMedium": data.primaryTextTheme.titleMedium,
      "TextTheme.titleSmall": data.textTheme.titleSmall,
      "primary.titleSmall": data.primaryTextTheme.titleSmall,
      "TextTheme.bodyLarge": data.textTheme.bodyLarge,
      "primary.bodyLarge": data.primaryTextTheme.bodyLarge,
      "TextTheme.bodyMedium": data.textTheme.bodyMedium,
      "primary.bodyMedium": data.primaryTextTheme.bodyMedium,
      "TextTheme.bodySmall": data.textTheme.bodySmall,
      "primary.bodySmall": data.primaryTextTheme.bodySmall,
      "TextTheme.labelLarge": data.textTheme.labelLarge,
      "primary.labelLarge": data.primaryTextTheme.labelLarge,
      "TextTheme.labelMedium": data.textTheme.labelMedium,
      "primary.labelMedium": data.primaryTextTheme.labelMedium,
      "TextTheme.labelSmall": data.textTheme.labelSmall,
      "primary.labelSmall": data.primaryTextTheme.labelSmall,
    };
  }
}

final ButtonStyle stadiumBorderStyle = ButtonStyle(
  shape: WidgetStateProperty.all<OutlinedBorder>(StadiumBorder()),
  side: WidgetStateProperty.resolveWith<BorderSide>((Set<WidgetState> states) {
    final Color color =
        states.contains(WidgetState.pressed) ? Colors.blue : Colors.red;
    return BorderSide(
        strokeAlign: BorderSide.strokeAlignCenter, color: color, width: 2);
  }),
);

final ButtonStyle roundedRectangleBorderStyle = ButtonStyle(
  shape: WidgetStateProperty.all<OutlinedBorder>(
    RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(8.0),
      ),
      side: BorderSide(strokeAlign: BorderSide.strokeAlignCenter),
    ),
  ),
  side: WidgetStateProperty.resolveWith<BorderSide>((Set<WidgetState> states) {
    final Color color =
        states.contains(WidgetState.pressed) ? Colors.blue : Colors.red;
    return BorderSide(
        strokeAlign: BorderSide.strokeAlignCenter, color: color, width: 2);
  }),
);
